<template>
<!--  引入第三方库-->
  <transition
      name="animate__animated animate__bounce"
      enter-active-class="animate__zoomInDown"
      leave-active-class="animate__zoomOutDown"
      appear
  >
    <li>
      <label>
        <!--      动态觉得是否勾选-->
        <input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)">
        <span v-show="!todo.isEdit">{{todo.title}}</span>
        <input type="text"
               :value="todo.title"
               v-show="todo.isEdit"
               @blur="handleBlur(todo,$event)"
               ref="inputTitle"
        >
      </label>
      <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
      <button class="btn btn-edit"
              @click="handleEdit(todo)"
              v-show="!todo.isEdit"
      >编辑</button>
    </li>
  </transition>
</template>

<script>
import 'animate.css'
import pubsub from 'pubsub-js'
export default {
  name: "MyItem",
  //声明接受todo对象
  props:['todo'],
  methods:{
    //勾选
    handleCheck(id){
      //通知app对象done值取反
   // this.cheakTodo(id)
      this.$bus.$emit('cheakTodo',id)
    },
    //删除
    handleDelete(id){
    if(confirm('确定删除吗'))
      //通知app删除对应id的todo项
   // this.deleteTodo(id)
   //    this.$bus.$emit('deleteTodo',id)
      pubsub.publish('deleteTodo',id)
    },
    //编辑
    handleEdit(todo){
      //新增一个是否编辑属性
      if(todo.hasOwnProperty.call('isEdit')){
        todo.isEdit=true
      }else {
        console.log('1')
        this.$set(todo,'isEdit',true)}
      this.$nextTick(function (){
        this.$refs.inputTitle.focus()
      })
    },
    //input框失去焦点(真正执行修改逻辑)
    handleBlur(todo,e){
      todo.isEdit=false
      if(!e.target.value.trim()) return alert('输入不能为空')
      this.$bus.$emit('updateTodo',todo.id,e.target.value)
    }
  }
}
</script>

<style scoped>
li{
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label{
  float: left;
  cursor: pointer;
}
li label li input{
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}
li button{
  float: right;
  display: none;
  margin-top: 3px;
}
li:before{
  content: initial;
}
li:last-child{
  border-bottom: none;
}
li:hover{
  background-color: #cccccc;
}
li:hover button{
  display: block;
}
</style>